<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="params.name" placeholder="商品标识" style="width: 200px;" class="filter-item" @keyup.enter.native="fetchData" />

      <el-button class="filter-item" style="margin-left: 20px;" type="primary" icon="el-icon-search" @click="fetchData">
        搜索
      </el-button>
      <el-button type="success" icon="el-icon-warning-outline" class="filter-item" @click="resetForm()">重置
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
      :header-cell-style="tableHeaderStyle"
    >
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ (params.page - 1) * params.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="商品标识">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>
      <el-table-column label="库房">
        <template slot-scope="scope">
          {{ scope.row.room }}
        </template>
      </el-table-column>
      <el-table-column label="扫码枪" align="center">
        <template slot-scope="scope">
          {{ scope.row.gun }}
        </template>
      </el-table-column>
      <el-table-column label="入库操作IP" align="center">
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>
      <el-table-column label="入库时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button type="text" @click="ewmForDetail(scope.row.codeId)">详情</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.page" :limit.sync="params.pageSize" @pagination="fetchData" />

    <!--二维码详情-->
    <el-dialog
      width="70%"
      title="详情"
      :visible.sync="showDialogEwmDetails"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form
        ref="dataGunForm"
        :model="ewmDetailsData"
        label-position="right"
        label-width="120px"
        style="margin-left:50px;margin-right: 50px"
      >
        <el-form-item label="前缀:" class="detailItem">
          {{ ewmDetailsData.prefix }}
        </el-form-item>
        <el-form-item label="标识:" class="detailItem">
          {{ ewmDetailsData.handle }}
        </el-form-item>
        <el-form-item label="商品类别:" class="detailItem">
          {{ ewmDetailsData.template }}
        </el-form-item>
        <el-form-item label="详细信息:" class="detailItem">
          <div v-for="(item,index) in ewmDetailsData.list" :key="index" class="detailBox">
            <div v-if="item.name" class="forNaLeft">{{ item.name }}</div>
            <div v-else class="forName borLeft" style="text-align: left" v-html="item.key">{{ item.key }}</div>

            <div v-if="item.type==1" class="forName borLeft">
              <img v-for="imgItem in item.dataList" :key="imgItem" :src="imgItem" style="max-width: 100%;width: 200px;margin: 10px 10px 10px 0;">
            </div>
            <div v-else class="forName borLeft" v-html="item.value">
              {{ item.value }}
            </div>

            <div style="clear: both" />
          </div>
        </el-form-item>
        <el-form-item class="detailItem">
          <div class="forUpdate" @click="showUpdate(ewmDetailsData)">更新</div>
        </el-form-item>
      </el-form>
      <!--  <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="showDialogEwmDetails=false">
                      确定
                  </el-button>
              </div>-->
    </el-dialog>

  </div>
</template>
<script>
import { get } from '../../utils/request'
import Pagination from '@/components/Pagination'
export default {
  name: 'EnterLog',
  components: { Pagination },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 10,
      checkedChoose: false,
      tableHeaderStyle: {
        'background': '#f4f4f4',
        'color': '#000'
      },
      params: {
        page: 1,
        pageSize: 10
      },
      rules: {
        name: [{ required: true, message: '请输入商品标识', trigger: 'blur' }]
      },

      showDialogEwmDetails: false,
      ewmDetailsData: {},
      ewmId: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      get(
        '/api/enterList.json',
        this.params
      ).then(response => {
        this.total = response.total
        this.list = response.rows
        this.listLoading = false
      })
    },

    ewmDetails(id) {
      get(
        '/api/codeDetail.json',
        { id: id }
      ).then(response => {
        // console.log(response);
        response.list.forEach(item => {
          console.log(item)
          // type 0 正常 1 图片  2url 3标识
          if (item.value) {
            if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.value)) {
              item.type = 1
              item.dataList = item.value.split(',')
            } else if (/[a-zA-z]+:\/\/[^\s]*/.test(item.value)) {
              item.type = 2
            } else if (item.value.startsWith('86.122.')) {
              item.type = 3
              item.dataList = item.value.split(',')
            } else {
              item.type = 0
            }
          } else {
            item.type = 0
          }
        })

        this.ewmDetailsData = response
      })
    },
    ewmForDetail(id) {
      this.showDialogEwmDetails = true
      this.ewmId = id
      this.ewmDetails(id)
    },
    showUpdate() {
      if (this.ewmId) {
        get(
          '/api/codeUpdate.json',
          { id: this.ewmId }
        ).then(response => {
          console.log(response)
          if (response) {
            response.list.forEach(item => {
              console.log(item)
              // type 0 正常 1 图片  2url 3标识
              if (item.value) {
                if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.value)) {
                  item.type = 1
                  item.dataList = item.value.split(',')
                } else if (/[a-zA-z]+:\/\/[^\s]*/.test(item.value)) {
                  item.type = 2
                } else if (item.value.startsWith('86.122.')) {
                  item.type = 3
                  item.dataList = item.value.split(',')
                } else {
                  item.type = 0
                }
              } else {
                item.type = 0
              }
            })
            this.ewmDetailsData = response
            this.$message({
              type: 'success',
              message: '更新成功!',
              customClass: 'zZindex'
            })
          }
        })
      }
    },

    resetForm() {
      this.params = {
        page: 1,
        pageSize: 10
      }
      this.$nextTick(() => {
        this.fetchData()
      })
    }
  }
}
</script>
<style scoped>
    .app-container {
        background: #fff;
        padding: 20px;
    }
    .filter-container {
        text-align: left;
        margin-bottom: 20px;
    }
    label {
        display: inline-block;
        margin-bottom: 2px;
    }
    @media only screen and (max-width: 1680px) {
        .itemBtn {
            display: block;
            margin: 2px auto;
        }
    }
    /deep/.el-dialog__body {
        padding: 0 10px 30px 10px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }
    .detailBox{
        width: 100%;
        height: auto;
    }
    .detailBox:nth-child(odd){
        background-color: #fff;
        border: 1px solid #eee;
    } .detailBox:nth-child(even){
          border: 1px solid #eee;
      }

    .forNaLeft{
        width: 15%;
        line-height: 25px;
        font-size: 14px;
        text-align: center;
        float: left;
    }
    .forName{
        width: 80%;
        line-height: 25px;
        font-size: 14px;
        text-align: left;
        float: left;
        padding-left: 2%;
    }
    .borLeft{
        border-left: 1px solid #eee;
    }
    .forUpdate{
        width: 50px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        text-align: center;
        font-size: 14px;
        background-color: #00affb;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
    }
    .zZindex {
        z-index: 3000 !important;
    }
</style>

